import React,{useState} from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button, Spin, Checkbox, Alert} from 'antd';
import request from '@/http';
import SecurityService from '@/pages/login/service';
import { history } from '@/.umi/core/history';
import {
    UserOutlined,
    LockOutlined,
} from '@ant-design/icons';
const { Option } = Select;
interface EditObject {
    isModalVisible: boolean
}

export default function Registration(props: { editObject: EditObject}) {
    const { editObject} = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  const onFinish = async (values: any) => {
    await request.post('/api/Users/AddUsers',{
        userTelphone:values.userTelphone,
        state:0,
        password:'123456',
        role:2,
        account:values.userTelphone,
        userAge: parseInt(values.userAge),
        userName:values.userName,
        userSex:values.userSex
      }).then((response:any)=>{
        if(response.code==200){
          message.success(response.message);
          setIsModalVisible(false);
        }else{
          message.success(response.message);
        }
      })
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
  }, [editObject]);

  const [spinning, setspinning] = useState(false);
    return (
        <Modal
        width={700}
        title='注册'
        visible={isModalVisible}
        onCancel={modelOnCancel}
        maskClosable={false}
        destroyOnClose
        style={{ top: '20vh' }}
        footer={false}
      >
        <Spin spinning={spinning} size="large">
          <Col span={24} >
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ roleType: '1', remember: true }}
              onFinish={onFinish}
              form={formObject}
            >
               <Row gutter={24} justify='center' >
            <Col span={10} key='1'>
              <Form.Item
                label="姓名"
                name="userName"
                rules={[
                  { required: true, whitespace: true, message: '不能为空!' },
                  { max: 30, message: '最大长度不能超过30!' },
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={10} key='2'>
              <Form.Item
                label="性别"
                name="userSex"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Select placeholder="请录入">
                <Option value={0} key={0}>男</Option>
                <Option value={1} key={1}>女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={10} key='3'>
              <Form.Item
                label="年龄"
                name="userAge"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={10} key='4'>
              <Form.Item
                label="电话（账号）"
                name="userTelphone"
                rules={[
                  { required: true, message: '不能为空!' }
                  ]}
              >
                <Input placeholder="请录入" />
              </Form.Item>
            </Col>
            <Col span={24} style={{margin:'10px 0'}} key='5'>
            <Alert message="默认密码123456，请及时修改。" type="info" showIcon />
            </Col>
            <Col>
            <Form.Item>
              <Button
                style={{marginRight:10}}
                htmlType='submit'
              >确认</Button>
              <Button
              onClick={modelOnCancel}
              >取消</Button>
              </Form.Item>
            </Col>
          </Row>
            </Form>
          </Col>
          </Spin>
      </Modal>
    )
}
